<template>
  <!-- 双列瀑布流图文 -->
  <div class="double-waterfall">
    <div
      v-for="(item, index) in list"
      :key="index"
      class="img-text-item"
      :class="{
        height: isHeight(index),
        'float-right': index % 2 !== 0,
        'float-left': index % 2 === 0,
      }"
    >
      <img :src="item.cover" />
      <p class="double-line-ellipsis">{{ item.title }}</p>
    </div>
    <div class="clear"></div>
  </div>
</template>

<script>
  export default {
    props: {
      list: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {};
    },
    methods: {
      isHeight(index) {
        const highIndex = [1, 4];
        if (highIndex.includes(index)) {
          return true;
        }
        return false;
      },
    },
  };
</script>
<style lang="less" scoped>
  .double-waterfall {
    // column-count: 2;
    // column-gap: 3.0rem;
    .img-text-item {
      overflow: hidden;
      border-radius: 2rem;
      background: #1b1b1b;
      width: 32rem;
      margin-bottom: 2.6rem;
      // break-inside: avoid;
      &.height {
        img {
          height: 32rem;
        }
      }
      &.float-left {
        float: left;
      }
      &.float-right {
        float: right;
      }
      img {
        width: 32rem;
        height: 24rem;
      }
      p {
        padding: 2rem;
        font-size: 2.4rem;
        font-weight: 200;
        color: #ffffff;
      }
    }
  }

  .clear {
    clear: both;
  }
</style>
